<template>
  <div
    class="tile"
    :element-loading-text="loadText"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    v-loading="loading"
  >
    <el-collapse v-model="activeNames">
      <el-collapse-item title="坐标属性" name="1">
        <template #title>
          <div class="collapse-title">
            坐标属性
            <el-button
              v-if="store.loginInfo.isroot == 0"
              size="small"
              style="margin-left: 10px"
              @click.stop="onSave"
            >保存</el-button>
            <el-button size="small" style="margin-left: 10px" @click.stop="onFlyTo">定位</el-button>
          </div>
        </template>

        <el-row :gutter="10" class="row">
          <el-col :span="3">经度:</el-col>
          <el-col :span="21">
            <el-input type="number" v-model="inputData.position.lng" @input="onChangeProperty"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
          <el-col :span="3">纬度:</el-col>
          <el-col :span="21">
            <el-input type="number" v-model="inputData.position.lat" @input="onChangeProperty"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="row">
          <el-col :span="3">高度:</el-col>
          <el-col :span="21">
            <el-input type="number" v-model="inputData.position.alt" @input="onChangeProperty"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="row" v-if="isTransform">
          <el-col :span="6">绕x轴旋转:</el-col>
          <el-col :span="18">
            <el-input type="number" v-model="inputData.rotation.x" @input="onChangeProperty"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="row" v-if="isTransform">
          <el-col :span="6">绕y轴旋转:</el-col>
          <el-col :span="18">
            <el-input type="number" v-model="inputData.rotation.y" @input="onChangeProperty"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="row" v-if="isTransform">
          <el-col :span="6">绕z轴旋转:</el-col>
          <el-col :span="18">
            <el-input type="number" v-model="inputData.rotation.z" @input="onChangeProperty"></el-input>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import {
  onMounted,
  onUnmounted,
  defineProps,
  defineEmits,
  ref,
  reactive
} from "vue";
import SvgIcon from "../../../components/SvgIcon.vue";
import { updateLayerdataJson } from "../../../api/system.js";
import {
  transform,
  getMatrix4ByTransform
} from "../../../../static/CIM/BQGIS-load/index";
import { ElMessage } from "element-plus";
import { useStore } from "../../../store/store";
import { useLayerStore } from "../../../store/layer";
// const emit = defineEmits(["update:modelValue", false]);
const props = defineProps({
  layerId: {
    type: String
  }
});
let temp = false; // 用于阻塞模型更改事件，避免表单与模型修改递归调用

const store = useStore();
const layerStore = useLayerStore();
const layer = viewer.getLayerById(props.layerId);
const activeNames = ref(["1"]);
const isTransform = ref(layer.transform); // 模型是否存在世界矩阵，false时无法进行旋转
const loading = ref(false);
const loadText = ref("");
let layerData = null;

const inputData = reactive({
  position: {
    lng: layer.center.lng,
    lat: layer.center.lat,
    alt: layer.center.alt
  },
  rotation: { x: layer.rotation.x, y: layer.rotation.y, z: layer.rotation.z }
});

layer.on(mars3d.EventType.updatePosition, function(event) {
  if (temp) return;
  inputData.position = {
    lng: layer.center.lng,
    lat: layer.center.lat,
    alt: layer.center.alt
  };
  inputData.rotation = {
    x: layer.rotation.x,
    y: layer.rotation.y,
    z: layer.rotation.z
  };
});

setLayerData();

onUnmounted(() => {
  layer.off(mars3d.EventType.updatePosition);
});

function onChangeProperty() {
  temp = true;
  layer.setOptions(inputData);
  // transform(layer, inputData)
  temp = false;
}

function onFlyTo() {
  layer.flyTo();
}

function setLayerData() {
  for (let i = 0; i < layerStore.treeData.length; i++) {
    if (layerStore.treeData[i].children) {
      const layers = layerStore.treeData[i].children;
      for (let i = 0; i < layers.length; i++) {
        if (layers[i].id === props.layerId) {
          layerData = layers[i];
          return;
        }
      }
    }
  }
}

async function onSave() {
  loadText.value = "正在保存";
  loading.value = true;

  try {
    const json = layerData.json ? JSON.parse(layerData.json) : {};
    json.position = inputData.position;
    json.rotation = inputData.rotation;
    const res = await updateLayerdataJson({
      id: props.layerId,
      json: JSON.stringify(json)
    });
    ElMessage({
      message: res.msg
    });
  } catch (error) {
    console.error(error);
    ElMessage({
      message: "修改失败",
      type: "warning"
    });
  } finally {
    loading.value = false;
  }
}
</script>

<style lang="scss" scoped>
.tile {
  height: 300px;
  width: 380px;
  overflow: auto;
  padding: 0 10px;
}
.collapse-title {
  display: flex;
  align-items: center;
}
:deep(.el-collapse) {
  border-color: transparent;
}
:deep(.el-collapse-item__header) {
  background-color: rgba($color: #000, $alpha: 0.4);
  border-color: transparent;
  padding-left: 5px;
  color: #fff;
}
:deep(.el-collapse-item__wrap) {
  background-color: transparent;
  border-color: transparent;
  padding-left: 10px;
  color: #fff;
}
.row {
  display: flex;
  align-items: center;
  color: #fff;
  margin: 10px 0;
}
</style>